<template>
  <div style="text-align:center,background-color:#6699cc;height:75px;">
    <div style="width=!00%;height:20px"></div>
    <p class="h4" align="center" style="vertical-align:middle;"><b>状态跟踪</b></p>
  </div>
  <div>
    <form>
      <div class="form-group">
        <label>使用者姓名：</label>
        <v-select id="f_upload_state" :value.sync="f_emp"
        :options='f_personnels' placeholder="请选择使用者姓名"
        close-on-select clear-button></v-select>
        &nbsp;&nbsp;<button type="button" class="btn btn-success" @click="refresh">刷新</button>
        &nbsp;&nbsp;<button type="button" class="btn btn-default" @click="lastKnownPos">人员位置&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-map-marker"></span></button>
      </div>
    </form>
    <list :model="model" partial='list'>
      <div partial>
        <div class="col-md-12 col-lg-12" style="align:center">
          <table class="table table-striped">
            <tbody>
              <tr>
                <td class="h5">上传状态时间：</td>
                <td>{{row.f_datetime}}</td>
              </tr>
              <tr>
                <td class="h5">手机使用者：</td>
                <td v-on:click.stop.prevent='$parent.$parent.footprint(row)'>{{row.f_user_name}}&nbsp;&nbsp;&nbsp;&nbsp;
                  <span class="glyphicon glyphicon-option-horizontal"></span>
                  <font color="blue">(足迹)</font>
                  <span class="glyphicon glyphicon-hand-left"></span>
                  <!-- <img src="../../../static/caozuo.png" width="32" height="22"></img> -->
                </td>
              </tr>
              <tr>
                <td class="h5">手机串码：</td>
                <td>{{row.f_sn}}</td>
              </tr>
              <tr>
                <td class="h5">经度：</td>
                <td>{{row.f_longitude}}</td>
              </tr>
              <tr>
                <td class="h5">纬度：</td>
                <td>{{row.f_latitude}}</td>
              </tr>
              <tr>
                <td class="h5">海拔：</td>
                <td>{{row.f_altitude}}米</td>
              </tr>
              <tr>
                <td class="h5">电量：</td>
                <td>{{row.f_battery_level}}</td>
              </tr>
              <tr>
                <td class="h5">信号强度：</td>
                <td>{{row.f_signal_strength}}</td>
              </tr>
              <tr>
                <td class="h5">剩余空间：</td>
                <td>{{row.f_internal_quote}}M</td>
              </tr>
              <tr>
                <td class="h5">流量：</td>
                <td>{{row.f_traffic/1000}}KB</td>
              </tr>
            </tbody>
          </table>
          <hr style="height:5px;color:gr">
        </div>
      </div>
    </list>
    <div style="height:50px;"></div>
  </div>
</template>

<script>
import co from 'co'
import Vue from 'vue'

let fetchPersonnel = function * (self) {
    console.log('in generator:' + Vue.url)
    let result = yield self.$post(Vue.url + 'sql/得到所长管辖的员工?pageNo=1&pageSize=9999', {
        data: {
            id: Vue.user.id,
            org_id: Vue.user.parentid
        }
    }, {
        resolveMsg: null,
        rejectMsg: '提取数据出错'
    })
    result.data.forEach(function(item) {
      self.f_personnels.push(item)
    })
}

let fetchPhoneState = function * (self) {
    let result = yield self.$post(Vue.url + 'sql/获取最新手机状态?pageNo=1&pageSize=9999', {
        data: {
            id: Vue.user.id,
            org_id: Vue.user.parentid,
            f_personnels: self.f_emp[0]
        }
    }, {
        resolveMsg: null,
        rejectMsg: '提取状态信息出错'
    })
    self.$set("model.rows", result.data)
}

export default {
  title: '状态跟踪',
  data() {
    return {
      model : {},
      f_personnels: [{label:'全部', value: '0'}],
      f_emp: ['0'],
    }
  },
  created () {
    console.log('track-state created')
    let fp = fetchPersonnel(this)
    co(fp)
  },
  ready () {
    console.log('track-state ready')
    let fp = fetchPhoneState(this)
    co(fp)
  },
  methods: {
    refresh () {
      let fp = fetchPhoneState(this)
      co(fp)
    },
    footprint(row) {
      this.$parent.$goto('footprint-map', {f_user_id: row.f_user_id, f_user_name: row.f_user_name}, 'master-router')
    },
    lastKnownPos() {
      this.$parent.$goto('post-map', {lonlats: this.model.rows}, 'master-router')
    }
  }
}
</script>
